<div style="display: none">
    <div z-create-vm-instance="winNewVmInstance" z-options="optionsCreateVmInstance"></div>
    <div z-search="search" z-options="optionsSearch"></div>
    <div z-confirm="deleteVmInstance" z-options="optionsDeleteVmInstance"></div>
    <div z-confirm="expungeVmInstance" z-options="optionsExpungeVmInstance"></div>
    <div z-migrate-vm-instance="migrateVm" z-options="optionsMigrateVm"></div>
    <div z-change-instance-offering="changeInstanceOffering" z-options="optionsChangeInstanceOffering"></div>
    <div z-vm-attach-volume="attachVolume" z-options="optionsAttachVolume"></div>
    <div z-vm-detach-volume="detachVolume" z-options="optionsDetachVolume"></div>
    <div z-vm-attach-l3-network="attachL3Network" z-options="optionsAttachL3Network"></div>
    <div z-vm-detach-l3-network="detachL3Network" z-options="optionsDetachL3Network"></div>
</div>

<div>
    <h3 class="z-h3">{{"vm.vm.VM INSTANCE" | translate}}</h3>
    <div class="btn-group-sm z-btn-bar">
        <button type="button" class="btn btn-default btn-sm" ng-click="funcRefresh()">
            <i class="fa fa-refresh"></i>
        </button>

        <button type="button" class="btn btn-default btn-sm" ng-click="funcSearch(search)">
            <i class="fa fa-search"></i>
        </button>

        <div z-sort-by z-options="optionsSortBy"></div>

        <button z-popover="popoverFilterBy" type="button" id="vmInstanceFilter" z-content-id="vmInstanceFilterContent" class="btn btn-default btn-sm" ng-click="filterBy.open(popoverFilterBy)">
            <i class="fa fa-filter"></i><span>&nbsp; {{filterBy.getButtonName()}}</span>
        </button>

        <button type="button" class="btn btn-success btn-sm" style="margin-left: 20px" ng-click="funcCreateVmInstance(winNewVmInstance)">
            <i class="fa fa-plus"></i>
            <span>&nbsp; {{"vm.vm.New VmInstance" | translate}}</span>
        </button>

        <div id="vmInstanceFilterContent" style="display: none">
            <form class="form">
                <div class="form-group">
                    <label for="fieldList" class="z-block-label">{{"vm.vm.FILTER BY" | translate}}</label>
                    <select id="fieldList" kendo-drop-down-list k-options="filterBy.fieldList" ng-model="filterBy.field"></select>
                </div>
                <div class="form-group">
                    <label class="z-block-label" for="valueList">{{"vm.vm.VALUE" | translate}}</label>
                    <select kendo-drop-down-list id="valueList" ng-disabled="filterBy.isValueListDisabled()" k-options="filterBy.valueList" ng-model="filterBy.value"></select>
                </div>
                <button type="button" class="btn btn-sm btn-primary" ng-click="filterBy.confirm(popoverFilterBy)">{{"vm.vm.Confirm" | translate}}</button>
            </form>
        </div>

        <div class="btn-group" ng-show="funcIsActionShow()">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" ng-disabled="funcIsActionDisabled()">
                {{"vm.vm.Action" | translate}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href ng-click="action.start()" ng-show="action.isActionShow('start')">{{"vm.vm.Start" | translate}}</a></li>
                <li><a href ng-click="action.stop()" ng-show="action.isActionShow('stop')">{{"vm.vm.Stop" | translate}}</a></li>
                <li><a href ng-click="action.reboot()" ng-show="action.isActionShow('reboot')">{{"vm.vm.Reboot" | translate}}</a></li>
                <li><a href ng-click="action.migrate()" ng-show="action.isActionShow('migrate')">{{"vm.vm.Migrate" | translate}}</a></li>
                <li><a href ng-click="action.console()" ng-show="action.isActionShow('console')">{{"vm.vm.Console" | translate}}</a></li>
                <li><a href ng-click="action.attachVolume()" ng-show="action.isActionShow('attachVolume')">{{"vm.vm.Attach Volume" | translate}}</a></li>
                <li><a href ng-click="action.detachVolume()" ng-show="action.isActionShow('detachVolume')">{{"vm.vm.Detach Volume" | translate}}</a></li>
                <li><a href ng-click="action.attachL3Network()" ng-show="action.isActionShow('attachL3Network')">{{"vm.vm.Attach L3 Network" | translate}}</a></li>
                <li><a href ng-click="action.detachL3Network()" ng-show="action.isActionShow('detachL3Network')">{{"vm.vm.Detach L3 Network" | translate}}</a></li>
                <li><a href ng-click="action.changeInstanceOffering()" ng-show="action.isActionShow('changeInstanceOffering')">{{"vm.vm.Change Instance Offering" | translate}}</a></li>
                <li><a href ng-click="action.recover()" ng-show="action.isActionShow('recoverVm')">{{"vm.vm.recover" | translate}}</a></li>
                <li class="divider"></li>
                <li><a href style="color:red" ng-click="funcDeleteVmInstance(deleteVmInstance)"  ng-show="action.isActionShow('delete')">{{"vm.vm.Delete" | translate}}</a></li>
                <li><a href style="color:red" ng-click="funcExpungeVmInstance(expungeVmInstance)" ng-show="action.isActionShow('expungeVm')">{{"vm.vm.Expunge" | translate}}</a></li>
            </ul>
        </div>
    </div>

    <div kendo-grid="vmInstanceGrid" k-options="oVmInstanceGrid.options" z-grid-double-click="funcGridDoubleClick" class="z-flat-table"></div>
    <p class="z-hint">{{"vm.vm.HINT1" | translate}}</p>
    <p class="z-hint">{{"vm.vm.HINT2" | translate}}</p>
</div>
